<template>
  <div class="container">
    <div class="bookName">{{ item.book.title }}</div>

    <div class="rate">
      <el-rate v-model="item.rating" disabled show-score text-color="#ff9900" score-template="{value}" />
    </div>
    <div class="content">
      <span class="userName">{{ item.user.name }}：</span>
      {{ item.content }}
    </div>
  </div>
</template>

<script setup lang='ts'>
import { defineProps } from 'vue'

const props = defineProps<{
  item: any
}>()

</script>

<style scoped>
.container {
  width: 800px;
  padding: 12px;
  margin-bottom: 14px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.bookName {
  font-size: 22px
}

.content {
  font-size: 12px;
}
</style>